<template>
    <el-container class="layout-container">
        <el-aside class="layout-aside" :style="isCollapse? 'width: 76px':'width: 276px'">
            <div class="layout-aside-default" :style="isCollapse? 'width: 60px':'width: 260px'">
                <div class="layout-logo">
                    <div class="website-name" v-show="!isCollapse">网球公园</div>
                    <div class="website-shrink" @click="changeShrink">
                        <el-icon v-if="isCollapse"><Expand /></el-icon>
                        <el-icon v-else><Fold /></el-icon>
                    </div>
                </div>
                <el-scrollbar class="layout-aside-scrollbar">
                    <el-menu :collapse="isCollapse">
                        <el-sub-menu index="data">
                            <template #title>
                                <el-icon><Notification /></el-icon>
                                <span>数据管理</span>
                            </template>
                            <el-menu-item index="wx-user">
                                <template #title>微信用户</template>
                            </el-menu-item>
                            <el-menu-item index="area-data" @click="toMenu('/system/areaList')">
                                <template #title>区域管理</template>
                            </el-menu-item>
                            <el-menu-item index="player-data" @click="toMenu('/system/playerList')">
                                <template #title>球员管理</template>
                            </el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </el-scrollbar>
            </div>
        </el-aside>
        <el-container>
            <el-header class="layout-header-row" style="text-align: right; font-size: 12px">
                <div class="title-row">
                    {{pageTitle}}
                </div>
                <div class="toolbar">
                    <el-popover
                        placement="bottom"
                        :width="300"
                        trigger="click"
                        >
                        <template #reference>
                            <div class="toolbar-btn-out-box">
                                <el-avatar :size="30" :icon="UserFilled" src="../assets/image-001.png" />
                            </div>
                        </template>
                        <template #default>
                            <div class="user-info-out-box">
                                <div class="user-info-icon-row">
                                    <el-avatar :size="60" :icon="UserFilled" src="../assets/image-001.png" />
                                </div>
                                <div class="user-info-name-row">
                                    张三
                                </div>
                                <div class="user-info-company-row">
                                    管理员
                                </div>
                                <div class="user-info-btn-row">
                                    <el-button class="user-info-btn" type="primary">修改信息</el-button>
                                    <el-button class="user-info-btn" type="danger" plain @click="preExit()">退出</el-button>
                                </div>
                            </div>
                        </template>
                    </el-popover>
                </div>
            </el-header>
            <el-main>
                <div class="layout-content">
                    <el-scrollbar class="scrollbar-main">
                        <router-view></router-view>
                    </el-scrollbar>
                </div>
            </el-main>
        </el-container>
    </el-container>
</template>
  
<script lang="ts" setup>
import { ref, watch, onMounted } from 'vue'
import { UserFilled } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import {  useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const isCollapse = ref<boolean>(false)
const pageTitle = ref<string>("")

watch(route, () => {
    initPageTitle()
}, {deep: true})

onMounted(() => {
    initPageTitle()
})
function initPageTitle () {
    let pageInfo = {...route}
    let meta:any = pageInfo.meta || {}
    pageTitle.value = meta.title || ''
}
function changeShrink(){
    isCollapse.value = !isCollapse.value
}
function preExit(){
    ElMessageBox.confirm(
        "您确定要退出本系统吗", "提示",
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            closeOnClickModal: false
        }
    ).then(() => {
    }).catch(() => {
    })
}
function toMenu(path: string) {
    router.push(path)
}
</script>

<style lang="scss" scoped>
.layout-container {
    background: #f5f5f5;
    height: 100vh;
    .layout-aside{
        transition: width .3s ease;
        .layout-aside-default{
            box-sizing: border-box;
            flex-shrink: 0;
            background: #ffffff;
            margin: 6px 0 6px 16px;
            height: calc(100vh - 12px);
            box-shadow: 0px 0px 12px rgba(0,0,0,.12);
            border-radius: 4px;
            overflow: hidden;
            transition: width .3s ease;
            .layout-logo{
                width: 100%;
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                padding: 10px;
                background: #fcfcfc;
                .website-name{
                    width: 200px;
                    height: 30px;
                    line-height: 30px;
                    display: block;
                    font-size: 20px;
                    font-weight: 600;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    color: #409EFF;
                    text-align: center;
                }
                .website-shrink{
                    width: 40px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 20px;
                    color: #409EFF;
                    cursor: pointer;
                }
                .website-shrink:hover{
                    color: #68b1fa;
                }
            }
            .layout-aside-scrollbar{
                height: calc(100% - 50px);
            }
        }

    }
    .layout-header-row{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title-row {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: calc(100% - 90px);
            height: 50px;
            padding: 0 8px;
            background-color: #ffffff;
            border-radius: 4px;
            box-shadow: 0px 0px 12px rgba(0,0,0,.12);
            font-size: 16px;
            font-weight: bold;
        }
        .toolbar{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            height: 50px;
            padding: 0 8px;
            background-color: #ffffff;
            border-radius: 4px;
            box-shadow: 0px 0px 12px rgba(0,0,0,.12);
            .toolbar-btn-out-box{
                width: 50px;
                height: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 20px;
                cursor: pointer;
            }
            .toolbar-btn-out-box:hover {
                background: #f5f5f5;
            }
        }

    }
}
.user-info-out-box{
    width: 274px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    .user-info-icon-row{
        width: 100%;
        height: 60px;
        padding: 10px 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .user-info-name-row{
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 20px;
        text-align: center;
        color: #606266;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .user-info-company-row{
        width: 100%;
        height: 30px;
        line-height: 30px;
        font-size: 18px;
        text-align: center;
        color: #a8abb2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .user-info-btn-row{
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        .user-info-btn{
            width: 100px;
        }
    }
}
.el-menu{
    border-right: 0;
}
.el-main{
    padding: 6px 20px;
    position: relative;
    .layout-content{
        width: calc(100% - 40px);
        height: calc(100% - 40px);
        border-radius: 4px;
        padding: 20px;
        background: #FFFFFF;
        box-shadow: 0px 0px 12px rgba(0,0,0,.12);
        .scrollbar-main {
            position: relative;
            width: 100%;
        }
    }
}
</style>